<template>
  <view class="detailEvaluateStyle" @click.stop="$utils.toUrl('/goods/goods/comment?goods_id=' + goodsInfo.id)"
    :style="[outModuleCss]" v-if="showEvaluate">
    <view :style="[moduleBgCss]" class="module-bg"></view>
    <view class="evaluate-section">
      <view class="evaluate-header">
        <view class="evaluate-title">
          <view class="line"></view>
          <view class="title">{{ $t("goods.evaluate") }}</view>
          <view class="title-num">{{ total > 0 ? total : "" }}</view>
        </view>
        <view class="title-right">
          <view v-if="currentEvaluate.length">{{$t('diy.comments')}}</view>
          <i class="iconfont icon-arrow-right"></i>
        </view>
      </view>
      <view class="evaluate-tab" v-if="currentEvaluate.length">
        <view class="tab-item" v-for="(item, index) in evaluateTab" :key="index">{{ item.text }}</view>
      </view>
      <view class="evaluateList" v-if="currentEvaluate.length">
        <commentList :list="currentEvaluate"></commentList>
      </view>

      <view class="btn" v-if="currentEvaluate.length > 0">{{$t('diy.viewComments')}}</view>
      <view class="no-data" v-if="!currentEvaluate.length">
        <view class="no-text">{{$t('diy.noComent')}}～</view>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    diySysPageMixin
  } from "@/components/diySystemPage/mixins/index.js";
  import commentList from "./components/commentList.vue";

  export default {
    props: {
      propsData: {
        type: Object,
        default: () => {
          return {};
        },
      },
      goodsInfo: {
        type: Object,
        default: () => {
          return {};
        },
      },
      isRefresh: Boolean,
    },
    components: {
      commentList,
    },
    mixins: [diySysPageMixin],
    data() {
      return {
        // 评价列表
        evaluateList: [],
        // 当前显示的条数
        currentEvaluate: [],
        // 评价总数
        total: 0,
        evaluateTab: [{
            text: this.$t('person.cashStatus1'),
            id: "-1",
          },
          {
            text: this.$t('goods.good'),
            id: "3",
          },
          {
            text: this.$t('goods.general'),
            id: "2",
          },
          {
            text: this.$t('goods.bad'),
            id: "1",
          },
        ],
      };
    },
    computed: {
      showEvaluate() {
        return this.propsData.params.showEvaluate
      }
    },
    watch: {
      isRefresh(e) {
        if (e == true) {
          this.getEvaluateList({
            goods_id: this.goodsInfo.id,
            page: 1,
          });
        }
      },
    },
    methods: {
      handleTabItem(id) {
        this.evaluateList = [];
        this.getEvaluateList({
          goods_id: this.goodsInfo.id,
          page: 1,
          score: id,
        });
      },
      // 点击评价图片预览图片
      preview(index, list) {
        uni.previewImage({
          current: index,
          urls: list,
        });
      },
      // 对商品评价分页
      paging() {
        if (this.evaluateList.length > 2) {
          let arr = this.evaluateList.splice(0, 2);
          this.currentEvaluate = [...this.currentEvaluate, ...arr];
        } else {
          this.currentEvaluate = [...this.currentEvaluate, ...this.evaluateList];
          this.evaluateList = [];
        }
      },
      // 获取商品评价
      async getEvaluateList(params) {
        try {
          const res = await this.$allrequest.goods.commentList(params);
          if (res.code == 0) {
            this.evaluateList = res.data.list.slice(0, 2);
            this.currentEvaluate = res.data.list.slice(0, 2);
            this.total = res.data.row_count;
            // this.paging();
          }
        } catch (e) {
        }
      },
    },
    created() {
      this.getEvaluateList({
        goods_id: this.goodsInfo.id,
        page: 1,
      });
    },
  };
</script>

<style scoped lang="less">
  .detailEvaluateStyle {
    position: relative;
    width: 100%;
    border-radius: 20rpx;

    .module-bg {
      width: 100%;
      height: 100%;
      z-index: -1;
      position: absolute;
      left: 0;
      top: 0;
    }

    .evaluate-section {
      width: 100%;
      padding-bottom: 4.33vw;
    }

    .evaluate-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 4.267vw 4.8vw 0 4.8vw;

      .evaluate-title {
        display: flex;
        align-items: center;

        .line {
          width: 6rpx;
          height: 4vw;
          background: #f1270d;
          margin-right: 1.067vw;
        }

        .title {
          font-size: 30rpx;
          font-weight: 600;
          color: #262626;
          margin: 0 1.067vw 0 0;
        }

        .title-num {
          font-size: 20rpx;
          font-weight: 600;
          color: #262626;
          margin-bottom: 0;
        }
      }

      .title-right {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        font-size: 24rpx;
        font-weight: 400;
        color: #8c8c8c;

        .iconfont {
          color: #000000;
          font-size: 22rpx;
          position: relative;
        }
      }
    }

    .evaluate-tab {
      width: 100%;
      display: flex;
      align-items: center;
      margin-top: 3.46vw;
      padding: 0 4.8vw;

      .tab-item {
        height: 6.93vw;
        margin-right: 2.67vw;
        padding: 0 3.73vw;
        line-height: 6.93vw;
        text-align: center;
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #262626;
        background: #fdf1f0;
        border-radius: 3.465vw;
      }

      .tab-item:last-child {
        margin-right: 0;
      }
    }
  
  .evaluateItem {
      padding: 30rpx 0;
      border-bottom: 1px solid #f2f2f2;

      .head {
        display: flex;
        align-items: center;

        .userPic {
          width: 60rpx;
          min-width: 60rpx;
          height: 60rpx;
          border-radius: 50%;
          overflow: hidden;

          image {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }

        .userInfo {
          margin-left: 10rpx;
          display: flex;
          flex-direction: column;

          .userName {
            font-size: 26rpx;
          }

          .starList {
            display: flex;
            align-items: center;
            margin-top: 10rpx;

            .star {
              width: 18rpx;
              height: 18rpx;
              margin-right: 4rpx;
            }
          }
        }
      }

      .content {
        .evaluateContent {
          font-size: 26rpx;
          font-weight: 500;
          margin: 20rpx 0 10rpx 0;
        }

        .picList {
          display: flex;
          align-items: center;
          flex-wrap: wrap;

          .picItem {
            width: 164rpx;
            height: 164rpx;
            margin-right: 4rpx;
            margin: 10rpx 4rpx 10rpx 0;
            overflow: hidden;

            image {
              width: 100%;
              height: 100%;
            }
          }

          .picItem:first-child {
            border-radius: 10rpx 0 0 10rpx;
          }

          .picItem:last-child {
            border-radius: 0 10rpx 10rpx 0;
          }

          .picitem:nth-child(4n + 1) {
            border-radius: 10rpx 0 0 10rpx;
          }

          .picitem:nth-child(4n) {
            border-radius: 0 10rpx 10rpx 0;
          }
        }
      }
    }

    .evaluateItem:last-child {
      border-bottom: none;
    }

    .btn {
      width: 230rpx;
      height: 60rpx;
      line-height: 60rpx;
      text-align: center;
      border: 1px solid #9b9b9b;
      border-radius: 30rpx;
      font-size: 24rpx;
      font-weight: 400;
      font-family: PingFang SC;
      color: #262626;
      margin: 20rpx auto 0 auto;
    }

    .no-data {
      width: 100%;
      display: flex;
      justify-content: center;
      padding-top: 3.46vw;

      .no-text {
        font-size: 13px;
        font-weight: 400;
        color: #8c8c8c;
      }
    }
  }
</style>
